<template>
    <div class="task">
        <header-footer :commonData="{$parent:$parent}">
            <div id="task" v-cloak>
                <div class="task_crumb index_width">
                    <ul>
                        <li class="f_left">当前位置：</li>
                        <li class="f_left">
                            <router-link to="/index">首页></router-link>
                        </li>
                        <li class="f_left">
                            <router-link to="javascript:void(0)">在线学习</router-link>
                        </li>
                    </ul>
                </div>
                <div class="index_width company_apply_tab_ul_box text_left">
                    <ul class="text_center company_apply_tab_ul task_tab_ul">
                        <li v-for="(tab,index) in taskTabs" :key="index"
                            :class="{company_apply_tab_active:taskTabIndex==index}" @click="getTaskList(index,tab)">
                            {{tab.productName}}
                        </li>
                    </ul>
                </div>
                <p v-if="!noTaskdialog" style="width: 1150px;margin: 0 auto;color: #FF0000;margin-bottom: 10px;">
                    已完成学习请到个人中心<router-link style="color: #3A89CC;" to="/user/download">下载中心</router-link>下载</p>
                <div class="clear"></div>
                <div class="task_list mainToBottom index_width text_center">
                    <div class="task_table_header">
                        <table width="100%">
                            <thead>
                                <tr>
                                    <td width="20%">任务时间</td>
                                    <td width="38%">任务名称</td>
                                    <td width="16%">完成状态</td>
                                    <td width="26%">&nbsp;</td>
                                </tr>
                            </thead>
                        </table>
                    </div>
                    <div class="task_table_body">
                        <table width="100%">
                            <tr v-for="(item,index) in taskLists" :key="index">
                                <td width="20%">{{new Date(item.updateTime).Format("yyyy-MM-dd hh:mm:ss")}}</td>
                                <td width="38%">{{item.taskName}}</td>
                                <td width="16%" :style="{color:item.isFinish==1?'#666666':'#DE5D5D'}">
                                    {{item.isFinish==1?"已完成":"未完成"}}
                                </td>
                                <td v-if="item.isFinish == 1" width="26%">
                                    <a class="task_over_btn">已完成</a>
                                </td>
                                <td v-if="item.isFinish == 0 && item.taskType == 0" width="26%">
                                    <a class="task_study_btn" @click="toVideo(item.objectId,item.groupCode)"
                                        :class="{isShow:item.isShowBtn}">继续学习</a>
                                </td>
                                <td v-if="item.isFinish == 0 &&item.taskType == 2" width="26%">
                                    <router-link class="task_study_btn" :class="{isShow:item.isShowBtn}"
                                        :to="String.Format('/exam/{0}/{1}',item.remark,item.objectId)">开始考试
                                    </router-link>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div class="task_download_certificate" :class="{showCertificate:isShowDownload}">
                        <button :disabled="disabled" @click="downLoadCertificate">下载证书</button>
                    </div>
                </div>
                <!-- 选择课时弹框 -->
                <el-dialog class="select_dialog dialog" title="请选择您的选课方式" :visible="viewClassDialog" width="60%">
                    <div class="text_center">
                        <!-- <h3 class="apply_title" style="display: inline-block;"></h3> -->
                        <div class="viewClassSumBox">
                            自定义课时（请选择{{taskObj.period}}课时），已选择：{{classMoviesNum}}个课时
                        </div>
                        <div class="viewClassList">
                            <!-- 选择课时 -->
                            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllChange">全选
                            </el-checkbox>
                            <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                <el-checkbox @change="chooseThis($event,ke)" v-for="(ke,index) in viewClass" :label="ke"
                                    :key="index" :title="ke.courseName+'（'+ke.videosCount+'课时）'">
                                    {{ke.courseName}}
                                    <span class="viewClass_num">({{ke.videosCount}}个课时)</span>
                                </el-checkbox>
                            </el-checkbox-group>
                        </div>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <router-link class="apply_return_task" to="/index">返回首页</router-link>
                        <el-button type="primary" @click="viewClassSure(checkedCities)">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </header-footer>
        <el-dialog :visible.sync="noTaskdialog" class="noTaskDialog" title="温馨提示" :show-close="false"
            :close-on-click-modal="false">
            <div class="noTaskdialogBox">
                <div>
                    暂无学习信息，请确认是否报名完成或当前学习是否完成，如未报名请前往首页报名，如已完成请前往下载中心下载相关证书！
                </div>
                <div style="display: flex;flex-direction: row;justify-content: space-around;margin-top: 80px;">
                    <router-link class="noTaskdialogBtn" to="/index">首 页</router-link>
                    <router-link class="noTaskdialogBtn" to="/user/download">下载中心</router-link>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    var _this;
    import headerFooter from '@/components/header_and_footer.vue'
    export default {
        name: 'task',
        data() {
            return {
                taskObj: {
                    period: this.$route.params.period,
                    applyId: this.$route.params.id,
                    tradeNo: "",
                    projectType: 0,
                    productId: 0
                },
                isIndeterminate: false,
                checkAll: false,
                taskTabIndex: 0,
                isShowDownload: false,
                disabled: true,
                taskTabs: [],
                taskLists: [],
                viewClassDialog: false,
                classHourNum: 0, //课时数
                classMoviesNum: 0, //视频数
                checkedCities: [], //弹框选择课时
                viewClass: [],
                noTaskdialog: false
            }
        },
        beforeCreate: function() {
            _this = this;
        },
        mounted: function() {
            this.getMyApplySuccess();
        },
        methods: {
            checkAllChange(val) {
                this.checkedCities = val ? this.viewClass : [];
                this.isIndeterminate = false;
                for (var i = 0; i < this.checkedCities.length; i++) {
                    var item = this.checkedCities[i];
                    _this.classMoviesNum += parseInt(item.videosCount);
                }
            },
            getMyApplySuccess: function() {
                this.common.post(this.api.getMyApplySuccess, {}, function(res) {
                    if (String.isEmptyOrNUll(res.resultMap)) {
                        // _this.$message.error("暂无学习信息！");
                        // _this.$router.go(-1);
                        _this.noTaskdialog = true;
                        return;
                    }
                    _this.taskTabs = res.resultMap;
                    if (res.resultMap.length <= 0) {
                        // _this.$message.error("当前没有要学习的课程！");
                        // _this.$router.go(-1);
                        _this.noTaskdialog = true;
                        return;
                    }
                    var nowIndex = 0;
                    if (_this.taskObj.applyId > 0) {
                        _this.taskTabs.forEach(function(v, i) {
                            if (v.id == _this.taskObj.applyId) {
                                nowIndex = i;
                                _this.taskObj.productId = v.productId; //默认
                                _this.taskObj.tradeNo = v.tradeNo; //默认
                                _this.taskObj.projectType = v.projectType; //默认
                                return;
                            }
                        });
                        _this.getTaskList(nowIndex, _this.taskObj);
                        return;
                    }
                    _this.taskObj.applyId = _this.taskTabs[0].id;
                    _this.taskObj.period = res.resultMap[0].period;
                    _this.taskObj.productId = res.resultMap[0].productId;
                    _this.taskObj.tradeNo = res.resultMap[0].tradeNo;
                    _this.taskObj.projectType = res.resultMap[0].projectType;
                    if (_this.taskObj.productId > 0) {
                        _this.getTaskList(0, _this.taskObj);
                    } else {
                        _this.$message.error("当前为面授报名，不需要在线学习！");
                        _this.taskLists = [];
                    }
                });
            },
            getCourses: function() {
                this.common.post(this.api.getCourses, {
                    applyId: _this.taskObj.applyId
                }, function(res) {
                    _this.viewClass = res.resultMap;
                    for (var i = 0; i < _this.viewClass.length; i++) {
                        var item=_this.viewClass[i];
                        _this.classMoviesNum += parseInt(item.videosCount);
                    }
                    if(_this.classMoviesNum==_this.taskObj.period){
                        _this.viewClassSure(_this.viewClass);
                    }
                });
            },
            handleCheckedCitiesChange: function(val) {
                this.classHourNum = val.length;
            },
            chooseThis: function(status, res) {
                if (status) {
                    this.classMoviesNum += parseInt(res.videosCount);
                } else {
                    this.classMoviesNum -= parseInt(res.videosCount);
                }
            },
            //选择课时
            viewClassSure: function(datas) {
                console.log(datas)
                var _this = this;
                if (datas.length <= 0) {
                    return;
                }
                if (parseInt(this.classMoviesNum) != parseInt(this.taskObj.period)) {
                    this.$message.error("选择课时数量有误,请选择" + this.taskObj.period + "课时");
                    return;
                }
                var courseIds = "";
                datas.forEach(function(v, i) {
                    courseIds += v.id + ',';
                });
                courseIds = courseIds.substr(0, courseIds.length - 1);
                this.viewClassDialog = false;
                this.common.post(this.api.chooseCourse, {
                    applyId: _this.taskObj.applyId,
                    courseIds: courseIds
                }, function(res) {
                    _this.getTaskList(_this.taskTabIndex, _this.taskObj);
                    window.location.reload();
                });
            },
            getTaskList: function(index, obj) {
                this.taskTabIndex = index;
                this.taskObj.productId = obj.productId;
                this.taskObj.period = obj.period;
                if (String.isEmptyOrNUll(obj.applyId)) {
                    this.taskObj.applyId = obj.id;
                } else {
                    this.taskObj.applyId = obj.applyId;
                }
                this.taskObj.tradeNo = obj.tradeNo;
                this.taskObj.projectType = obj.projectType;
                this.common.post(this.api.getTasks, {
                    tradeNo: this.taskObj.tradeNo,
                    classType: this.taskObj.projectType,
                }, function(res) {
                    if (res.ext == 3 && _this.taskObj.productId > 0) {
                        _this.getCourses();
                        _this.viewClassDialog = true;
                        return;
                    }
                    if (_this.taskObj.productId <= 0) {
                        _this.$message.error("当前为面授报名，不需要在线学习！");
                        _this.taskLists = [];
                        return;
                    }
                    _this.viewClassDialog = false;
                    _this.taskLists = res.resultMap;
                    if (_this.taskLists.length <= 0) {
                        _this.common.toPage("/index");
                        return;
                    }
                    _this.taskLists.forEach(function(v, i) {
                        v.isShowBtn = true;
                    })
                    var a = _this.taskLists;
                    for (var i = 0; i < a.length; i++) {
                        if (a[i].isFinish != 1 && a[i].isOver != 1) {
                            a[i].isShowBtn = false;
                            _this.isShowDownload = false;
                            _this.disabled = true;
                            return;
                        } else {
                            _this.isShowDownload = true;
                            _this.disabled = false;
                        }
                    }
                });
            },
            toVideo: function(objectId, groupCode) {
                if (String.isEmptyOrNUll(objectId)) {
                    this.common.toPage("/404");
                } else {
                    this.common.toPage(String.Format('/play/{0}/{1}/{2}', objectId, this.taskObj.applyId,
                        groupCode));
                }
            },
            downLoadCertificate: function() {
                this.common.post(this.api.lookCertificate, {
                    applyid: this.taskObj.applyId
                }, function(res) {
                    if (String.isEmptyOrNUll(res.resultMap)) {
                        return;
                    }
                    _this.$message.success("正在打开证书，请稍等...");
                    setTimeout(function() {
                        window.location.href = res.resultMap;
                    }, 2000);
                });
            }
        },
        components: {
            headerFooter
        }
    }
</script>

<style>
    .noTaskdialogBox {
        height: 100%;
        margin: 30px 0;
        font-size: 18px;
    }

    .noTaskdialogBtn {
        color: #ffffff;
        display: block;
        padding: 10px 15px;
        background: #0B67D0;
        text-align: center;
        border-radius: 4px;
    }

    .zZindex {
        z-index: 3000 !important;
    }

    body {
        background: #ffffff;
    }

    .apply_return_task {
        background: transparent;
        color: #333333;
        border: 1px solid #cccccc;
        outline: none;
        font-size: 16px;
        display: inline-block;
        height: 38px;
        line-height: 38px;
        border-radius: 4px;
        margin: 0 10px;
        padding: 0 16px;
    }

    .task .header,
    .task .index_width {
        width: 1150px;
    }

    .el-dialog__wrapper.select_dialog.dialog .el-dialog__header {
        padding: 20px 20px 10px;
        padding-bottom: 20px;
    }

    .select_dialog .el-dialog__close.el-icon.el-icon-close {
        display: none;
    }

    .select_dialog .viewClassList .el-checkbox {
        text-align: left;
        padding-left: 20px;
        overflow: hidden;
    }
</style>
